<template>
  <div id="warehouseIndex">
    <el-row>
      <!-- 表格查询条件 -->
      <el-col :span="24">
        <el-form :inline="true" ref="stationForm" :model="queryForm">
          <el-form-item>
            <el-input v-model="queryForm.name" placeholder="仓库名称/编号"></el-input>
          </el-form-item>
          <el-form-item>
            <gd_param type="select"
                      paramCode="warehouseType"
                      placeholder="仓库类型"
                      v-model="queryForm.typeCode" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryForm.address" placeholder="仓库地址"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getTableDatas()">查询</el-button>
            <el-button @click="resetQueryForm" icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <!-- 数据表格 -->
      <el-col :span="24">
        <el-row>
          <el-col :span="24">
            <el-button type="primary" icon="el-icon-plus" @click="dialog.isEdit=false;dialog.saveOrEditDiv=true">新增仓库</el-button>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="moreDeletes">
              <el-button slot="reference" type="danger" icon="el-icon-delete">批量删除</el-button>
            </el-popconfirm>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px;">
          <el-col :span="24">
            <el-table :data="tableData" border style="width: 100%" @selection-change="tableDataSelected">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="code" label="编号"></el-table-column>
              <el-table-column prop="name" label="仓库名称"></el-table-column>
              <el-table-column prop="typeName" label="仓库类型" width="110"></el-table-column>
              <el-table-column label="仓库大小">
                <template slot-scope="scope">
                  <span>长：{{ scope.row.length }}m 宽：{{ scope.row.width }}m 高:{{ scope.row.height }}m</span>
                </template>
              </el-table-column>
              <el-table-column prop="capacity" label="仓库容量(m³)" width="151"></el-table-column>
              <el-table-column prop="address" label="仓库位置"></el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="180">
                <template slot-scope="scope">
                  <el-button @click="rowShow(scope.row)" size="small" icon="el-icon-search" circle title="查看"></el-button>
                  <el-button @click="rowEdit(scope.row)" type="primary" size="small" icon="el-icon-edit" circle title="编辑"></el-button>
                  <el-button @click="rowDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle title="删除"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="tableSizeChange"
              @current-change="tableCurrentChange"
              :current-page="pageData.page"
              :page-sizes="[10, 20, 40, 100]"
              :page-size="pageData.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageData.total"
            ></el-pagination>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 添加或修改-业务弹窗 -->
    <el-dialog
      :title="dialog.isEdit == true ? '编辑仓库' : '新增仓库'"
      :visible.sync="dialog.saveOrEditDiv"
      width="80%"
      :show-close="false"
      :modal="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <el-form ref="saveOrEditDataForm" :rules="saveOrEditDataFormRules" :model="saveOrEditData" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库名称" prop="name">
              <el-input show-word-limit v-model="saveOrEditData.name" placeholder="请输入仓库名称" maxlength="10"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库类型" prop="typeCode">
              <gd_param type="select"
                        paramCode="warehouseType"
                        placeholder="请选择仓库类型"
                        @selectChange="warehouseTypeChange"
                        v-model="saveOrEditData.typeCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库-长度" prop="length">
              <el-input show-word-limit v-model="saveOrEditData.length" placeholder="请输入仓库长度" maxlength="10"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库-宽度" prop="width">
              <el-input show-word-limit v-model="saveOrEditData.width" placeholder="请输入仓库宽度" maxlength="10"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库-高度" prop="height">
              <el-input show-word-limit v-model="saveOrEditData.height" placeholder="请输入仓库高度" maxlength="10"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库-容量" prop="capacity">
              <el-input show-word-limit v-model="saveOrEditData.capacity" placeholder="请输入仓库容量（单位：m³）" maxlength="10"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地理位置">
              <gd_map showType="1" :latitude="saveOrEditData.latitude" :longitude="saveOrEditData.longitude" @mapSelectChange="mapSelectChange"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="详细地址" prop="address">
              <el-input
                show-word-limit
                maxlength="150"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入仓库详细位置"
                v-model="saveOrEditData.address"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注" prop="comment">
              <el-input
                show-word-limit
                maxlength="150"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="如需备注输入描述"
                v-model="saveOrEditData.comment"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库照片">
              <gd_file v-if="dialog.isEdit == false" @uploadSuccess="warehouseImgChange" />
              <gd_file
                v-else
                :fileID="saveOrEditData.fileID"
                @uploadSuccess="warehouseImgChange"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 按钮组 -->
        <el-form-item>
          <el-button type="primary" @click="submitSaveOrEdit" :loading="formLoading">{{ dialog.isEdit == false ? '保存' : '确认修改' }}</el-button>
          <el-button
            @click="
							dialog.saveOrEditDiv = false;
							resetAddOrEditOrShowForm();
						"
          >
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 添加或修改-业务弹窗 -->
    <el-dialog
      title="仓库详情"
      :visible.sync="dialog.showDiv"
      width="70%"
      :show-close="false"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <el-descriptions class="margin-top" :column="2"  border>
        <template slot="extra">
          <el-button
            @click="
							dialog.showDiv = false;
							resetAddOrEditOrShowForm();
						"
          >
            关闭
          </el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            编号
          </template>
          {{ showData.code }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            名称
          </template>
          {{ showData.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            仓库位置
          </template>
          {{ showData.address }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            仓库类型
          </template>
          {{ showData.typeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            长度
          </template>
          {{ showData.length }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            宽度
          </template>
          {{ showData.width }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            高度
          </template>
          {{ showData.height }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            仓库容量
          </template>
          {{ showData.capacity }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            详细地址
          </template>
          {{ showData.address }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            备注
          </template>
          {{ showData.comment }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            地理位置
          </template>
          <gd_map v-if="dialog.showDiv" style="height: 200px" :showTile="showData.name" :showAddress="showData.address" showType="2" :latitude="parseFloat(showData.latitude)" :longitude="parseFloat(showData.longitude)"/>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            仓库照片
          </template>
          <el-image
            style="width: 200px; height: 200px"
            :src="showData.fileUrl"
            :preview-src-list="[showData.fileUrl]"
          ></el-image>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>


  </div>
</template>

<script>
import gd_param from "@/components/mycomponents/gd_param.vue";
import * as axiosAPI from '@/api/wms/warehouse.js';
import gd_map from "@/components/mycomponents/gd_map.vue";
import gd_file from "@/components/mycomponents/gd_file.vue";
export default {
  name: 'warehouseIndex',
  components:{gd_file, gd_map, gd_param},
  data() {
    return {
      //查询表单数据
      queryForm: {
        name: null,
        address: null,
        typeCode: null
      },
      //表格数据
      tableData: [],
      //主表-分页数据
      pageData: {
        page: 1,
        size: 10,
        total: 0
      },
      //当前表格复选数据
      nowTableSelected: [],
      //弹窗状态
      dialog: {
        isEdit: false,
        saveOrEditDiv: false,
        showDiv: false
      },
      //添加或编辑表单数据
      saveOrEditData: {
        warehouseID: null,
        comment: null,
        name: null,
        code: null,
        address: null,
        longitude: null,
        latitude: null,
        typeCode: null,
        typeName: null,
        length: null,
        width: null,
        height: null,
        capacity: null,
        fileID:null,
        fileUrl:null
      },
      //添加编辑表单-检验
      saveOrEditDataFormRules:{
        address: { required: true, message: '请输入仓库详细地址', trigger: 'blur' },
        name: { required: true, message: '请输入仓库名称', trigger: 'blur' },
        typeCode: { required: true, message: '请选择仓库类型', trigger: 'change' }
      },
      //展示表单数据
      showData: {
        warehouseID: null,
        comment: null,
        name: null,
        code: null,
        address: null,
        longitude: null,
        latitude: null,
        typeCode: null,
        typeName: null,
        length: null,
        width: null,
        height: null,
        capacity: null,
        fileID:null,
        fileUrl:null
      },
      //表单加载值
      formLoading: false
    };
  },
  mounted() {
    this.getTableDatas();
  },
  methods: {
    //查询表格数据
    getTableDatas() {
      let _this = this;
      axiosAPI.pages(_this.queryForm, _this.pageData)
        .then(function(response) {
          console.log(response);
          if (response.code == '0000') {
            _this.tableData = response.data.rows;
            _this.pageData.total = response.data.total;
          }
        });
    },
    //重置查询条件表单
    resetQueryForm() {
      this.queryForm = {
        name: null,
        address: null,
        typeCode: null
      };
      this.getTableDatas();
    },
    //重置添加、编辑、展示表单
    resetAddOrEditOrShowForm() {
      this.showData = {
        warehouseID: null,
        comment: null,
        name: null,
        code: null,
        address: null,
        longitude: null,
        latitude: null,
        typeCode: null,
        typeName: null,
        length: null,
        width: null,
        height: null,
        capacity: null,
        fileID:null,
        fileUrl:null
      };
      this.saveOrEditData = {
        warehouseID: null,
        comment: null,
        name: null,
        code: null,
        address: null,
        longitude: null,
        latitude: null,
        typeCode: null,
        typeName: null,
        length: null,
        width: null,
        height: null,
        capacity: null,
        fileID:null,
        fileUrl:null
      };
    },
    //提交-添加、编辑表单
    submitSaveOrEdit() {
      let _this = this;
      this.$refs.saveOrEditDataForm.validate(valid => {
        if (valid) {
          this.formLoading = true;
          let _this = this;
          if(_this.dialog.isEdit == true){// 编辑

            axiosAPI.update(_this.saveOrEditData)
              .then(function(res) {
                if (res.code == '0000') {
                  _this.dialog.saveOrEditDiv = false;
                  _this.resetAddOrEditOrShowForm();
                  _this.formLoading = false;
                  _this.getTableDatas();
                } else {
                  _this.formLoading = false;
                }
              });

          }else{ // 添加
            axiosAPI.add(_this.saveOrEditData)
              .then(function(res) {
                if (res.code == '0000') {
                  _this.dialog.saveOrEditDiv = false;
                  _this.resetAddOrEditOrShowForm();
                  _this.formLoading = false;
                  _this.getTableDatas();
                } else {
                  _this.formLoading = false;
                }
              });
          }
        }
      });
    },
    //提交-删除
    submitDelete(ids){
      let _this = this;
      axiosAPI.deletes(ids)
        .then(res => {
          if (res.code == '0000') {
            _this.getTableDatas();
          }
        });
    },
    //分页条目数切换
    tableSizeChange(size) {
      this.pageData.size = size;
      this.getTableDatas();
    },
    //页码切换
    tableCurrentChange(page) {
      this.pageData.page = page;
      this.getTableDatas();
    },
    //行-查看
    rowShow(data) {
      this.showData = JSON.parse(JSON.stringify(data));
      this.dialog.showDiv = true;
    },
    //行-编辑
    rowEdit(data) {
      this.dialog.saveOrEditDiv = true;
      this.saveOrEditData = JSON.parse(JSON.stringify(data));
      this.dialog.isEdit = true;
    },
    //行-删除
    rowDelete(data) {
      this.$confirm('确定要删除这行数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDelete(data.warehouseID);
      });
    },
    //点击批量删除
    moreDeletes() {
      if(this.nowTableSelected.length<=0){
        this.$notify.warning({
          title: '删除提示',
          message: '请至少选择一条数据再删除'
        });
        return;
      }
      let ids = '';

      for (var i in this.nowTableSelected) {
        ids += this.nowTableSelected[i].warehouseID + ',';
      }

      ids = ids.substring(0, ids.length - 1);

      //调用删除
      this.submitDelete(ids);
    },
    //表格批量选择
    tableDataSelected(data){
      this.nowTableSelected = data;
    },
    // 仓库类型切换
    warehouseTypeChange(data){
      if(data == undefined){
        this.saveOrEditData.typeCode = null;
        this.saveOrEditData.typeName = null;
      }else{
        this.saveOrEditData.typeCode = data.dataValue;
        this.saveOrEditData.typeName = data.dataName;
      }
    },
    // 地图选点切换
    mapSelectChange(data){
      this.saveOrEditData.latitude = data.latitude;
      this.saveOrEditData.longitude = data.longitude;
    },
    // 图片上传切换
    warehouseImgChange(data){
      if(data.length==0){
        this.saveOrEditData.fileID = null;
        this.saveOrEditData.fileUrl = null;
      }else{
        this.saveOrEditData.fileID = data[0].id;
        this.saveOrEditData.fileUrl = data[0].url;
      }
    }

  }
};
</script>

<style scoped></style>
